<template>
  <div class="WorkGroupEdit">
    <ImageUpload class="ImageUpload" @imgchange="imgChange" ref="ImageUpload">
      <span slot="tip">更换封面</span>
    </ImageUpload>
    <div class="form-group">
      <input type="text" name="workGroupName" v-model="WorkGroupInfo.artist_name" class="col-xs-12 workGroupName form-control" placeholder="请输入专辑名">
    </div>
    <div class="form-group" style="margin-bottom: 0">
      <div class="flex">
        <div class="flex-item">
          <PlusBlock style="float: left" @click.native="showAddWorks"></PlusBlock>
        </div>
        <div class="flex-item">
          <EditBlock style="margin: 0 auto" ref="EditBlock" @click.native="setEditStatus(1)"></EditBlock>
        </div>
        <div class="flex-item">
          <RemoveBlock  style="float: right" ref="RemoveBlock" @click.native="setEditStatus(2)"></RemoveBlock>
        </div>
      </div>
    </div>
    <div style="text-align: right;margin-top:.4rem;" v-if="editStatus>0">
      <b v-if="WorkGroupHasWorksSelectedWorksIds.length==0" @click="WorkGroupHasWorksSelectedSelectAll(true)">一键全选</b>
      <b v-else @click="WorkGroupHasWorksSelectedSelectAll(false)">一键取消</b>
    </div>
    <div class="form-group">
      <ul>
        <li v-for="v in WorkGroupHasWorks" :key="v.works_id" style="margin-top:.4rem;">
          <item01 :work-info="v" :CheckBtnState="WorkGroupHasWorksSelectedWorksIds.indexOf(v.works_id)>-1?1:0" @changeCheckState="changeCheckState" :editStatus="editStatus" :CheckBtnTheme="CheckBtnTheme" ref="item01" >
            <div slot="details">
              <div class="worksPrice" v-if="v.is_on_sale==2" style="color: #E62323">￥{{v.works_price}}</div>
              <div class="worksTitle" style="color:#8C8B8B;">{{v.works_title}}</div>
            </div>
          </item01>
        </li>
      </ul>
      <div class="btns shadow" style="padding: .2rem 0;position: fixed;bottom:0rem;z-index: 123;width: 10rem;left: 0;background-color: white">
        <div v-if="editStatus==0">
          <!--    常态    -->
          <BtnCommon class="BtnCommon col-xs-8 col-xs-offset-2" bgColor="#00DACD" @click.native="saveWorkgroup">保 存</BtnCommon>
        </div>
        <div v-if="editStatus==1">
          <!--    编辑态    -->
          <BtnCommon class="BtnCommon col-xs-8 col-xs-offset-2" v-if="WorkGroupHasWorksSelectedWorksIds.length>0" bgColor="#00DACD" @click.native="showMoveToOtherWorkGroup">转 移</BtnCommon>
          <BtnCommon class="BtnCommon col-xs-8 col-xs-offset-2" v-else @click.native="setEditStatus(0)">取 消</BtnCommon>
        </div>
        <div v-if="editStatus==2">
          <!--    删除态    -->
          <BtnCommon class="BtnCommon col-xs-8 col-xs-offset-2" v-if="WorkGroupHasWorksSelectedWorksIds.length>0" bgColor="#E62323" @click.native="MoveToZeroWorkGroup">删 除</BtnCommon>
          <BtnCommon class="BtnCommon col-xs-8 col-xs-offset-2" v-else @click.native="setEditStatus(0)">取 消</BtnCommon>
        </div>
      </div>

    </div>
    <div class="mask" v-if="AddWorksMask">
      <WorksChoose @submit="AddWorksSubmit" @closeMe="closeAddWorks" :data-list="WorkGroupWorksArtistEqualZero" :componentKey="componentKey"></WorksChoose>
    </div>
    <div class="mask" v-if="MoveToOtherWorkGroupMask">
      <WorkGroupChoose @submit="MoveToOtherWorkGroupMaskSubmit" @closeMe="closeMoveToOtherWorkGroup" :data-list="OtherWorkGroups" :componentKey="componentKey"></WorkGroupChoose>
    </div>
    <AlertBottom ref="ab"></AlertBottom>
    <ConfirmBottom ref="cb"></ConfirmBottom>
  </div>
</template>
<script>
import ImageUpload from '@/components/images/ImageUpload'
import PlusBlock from "@/components/buttons/PlusBlock";
import EditBlock from "@/components/buttons/EditBlock";
import RemoveBlock from "@/components/buttons/RemoveBlock";
import Item01 from "../../components/work/item01";
import BtnCommon from "@/components/buttons/BtnCommon";
import WorksChoose from "../Work/WorksChoose";
import WorkGroupChoose from "../WorkGroup/WorkGroupChoose";
export default {
  data(){
    return {
      AddWorksMask:false,
      MoveToOtherWorkGroupMask:false,
      editStatus:0,
      CheckBtnTheme:'',
      WorkGroupId:0,
      WorkGroupInfo:[],
      WorkGroupHasWorks:[],
      WorkGroupWorksArtistEqualZero:[],
      WorkGroupHasWorksSelectedWorksIds:[],
      OtherWorkGroups:[],
      componentKey:0,
      dUserinfo:[]
    }
  },
  computed:{
    uid(){
      let _this = this
      if (_this.dUserinfo)return _this.dUserinfo.uid
      return 0
    }
  },
  watch:{
    WorkGroupId(n){
      this.getWorkGroupInfo(n)
      this.getWorksByGroupId(n)
    },
    uid(n){
      this.getWorkGroupWorksArtistEqualZero()
    }
  },
  methods:{
    saveWorkgroup(){
      let _this = this
      if (_this.WorkGroupInfo.artist_name==""){
        alert('专辑名必须')
        return false
      }
      let params={
        groupId:_this.WorkGroupId,
        artist_name:_this.WorkGroupInfo.artist_name,
        cover_img_base64:_this.WorkGroupInfo.cover_img,
        status:1
      }
      myjs.saveWorkGroup(params,function(data){
        //alert('保存成功')
        _this.$refs.ab.setIcon("fa fa-check").setAutoClose(true).setContent('保存成功').show()
      },function(){
        _this.$refs.ab.setIcon("fa fa-exclamation-triangle").setAutoClose(true).setContent('保存失败').show()
      })
    },
    getWorkGroupWorksArtistEqualZero(){
      let _this = this
      if (!_this.uid)return false
      myjs.getWorksByGroupId({groupId:0,perPageCount:999,uid:_this.uid},function(data){
        _this.WorkGroupWorksArtistEqualZero = data.data
      },function(){
        _this.WorkGroupWorksArtistEqualZero = []
      })
    },
    showAddWorks(){
      this.AddWorksMask = true
      this.componentKey++
    },
    showMoveToOtherWorkGroup(){
      if (this.WorkGroupHasWorksSelectedWorksIds.length==0)return false;
      this.MoveToOtherWorkGroupMask = true
      this.componentKey++
    },
    AddWorksSubmit(WorksIdChoose){
      let _this = this
      console.log(WorksIdChoose);
      if (WorksIdChoose.length==0)return false
      if (_this.WorkGroupId==0){
        //没有专辑的话建一个默认的
      }
      myjs.changeWorksArtistByWorksIds({uid:_this.uid,WorksIds:WorksIdChoose,groupId: _this.WorkGroupId},function(data){
        console.log(data);
        _this.closeAddWorks()
        _this.getWorkGroupWorksArtistEqualZero()
        _this.getWorksByGroupId(_this.WorkGroupId)
      },function(data){
        console.log(data)
      })
    },
    MoveToOtherWorkGroupMaskSubmit(WorkGroupIdChoose){
      let _this = this
      let groupId = WorkGroupIdChoose[0]
      myjs.changeWorksArtistByWorksIds({uid:_this.uid,WorksIds:_this.WorkGroupHasWorksSelectedWorksIds,groupId:groupId},function(data){
        _this.closeMoveToOtherWorkGroup()
        _this.getOtherWorkGroups()
        _this.getWorksByGroupId(_this.WorkGroupId)
      },function(data){
        console.log(data)
      })
    },
    closeAddWorks(){
      this.AddWorksMask = false
      this.componentKey++
    },
    closeMoveToOtherWorkGroup(){
      this.MoveToOtherWorkGroupMask = false
      this.componentKey++
    },
    WorkGroupHasWorksSelectedSelectAll(b){
      console.log(b)
      let _this = this
      _this.WorkGroupHasWorksSelectedWorksIds=[]
      if (b){
        for (let i = 0; i < _this.WorkGroupHasWorks.length; i++) {
          _this.WorkGroupHasWorksSelectedWorksIds.push(_this.WorkGroupHasWorks[i].works_id)
        }
      }
    },
    changeCheckState(p){
      if (p.check_status){
        this.WorkGroupHasWorksSelectedWorksIds.push(p.check_id)
      }else{
        this.WorkGroupHasWorksSelectedWorksIds.remove(p.check_id)
      }
    },
    setEditStatus(v){
      let _this= this
      if (v==1){
        if (_this.editStatus!=0)return false
        _this.EditBlockClick()
      }else if(v==2){
        if (_this.editStatus!=0)return false
        _this.RemoveBlockClick()
      }else{
        console.log(v)
        _this.$refs.EditBlock.setSelected(0)
        _this.$refs.RemoveBlock.setSelected(0)
      }
      _this.editStatus=v
    },
    MoveToZeroWorkGroup(){
      let _this= this
      _this.$refs.cb.setContent("确定删除吗?").show(b=>{
        if (b){
          myjs.changeWorksArtistByWorksIds({uid:_this.uid,WorksIds:_this.WorkGroupHasWorksSelectedWorksIds,groupId: 0},function(data){
            _this.getWorkGroupWorksArtistEqualZero()
            _this.getWorksByGroupId(_this.WorkGroupId)
          },function(data){
            _this.$refs.ab.setContent("确定删除吗?").show(data.info)
          })
        }
      })
    },
    EditBlockClick(){
      let _this= this
      _this.CheckBtnTheme='SkyBlue'
      _this.$refs.EditBlock.setSelected(1)
    },
    RemoveBlockClick(){
      let _this= this
      _this.CheckBtnTheme = 'Red'
      _this.$refs.RemoveBlock.setSelected(1)
    },
    getWorkGroupInfo(groupId){
      let _this = this
      myjs.getWorkGroupInfo({groupId},function(data){
        _this.WorkGroupInfo = data.data
        if (data.data.cover_img){
          _this.$refs.ImageUpload.imgSrc = data.data.cover_img
        }
        _this.getWorkGroupWorksArtistEqualZero()
        _this.getOtherWorkGroups()
      })
    },
    getOtherWorkGroups(){
      let _this = this
      _this.OtherWorkGroups=[]
      myjs.getWorksGroupListByUid({uid:_this.uid},function(data){
        for (const dataKey in data.data) {
          if (data.data[dataKey].id>0 && data.data[dataKey].id!==_this.WorkGroupId){
            _this.OtherWorkGroups.push(data.data[dataKey])
          }
        }
      })
    },
    getWorksByGroupId(groupId){
      let _this = this
      _this.WorkGroupHasWorksSelectedWorksIds=[]
      let params={groupId,perPageCount:99999,uid:_this.uid}
      myjs.getWorksByGroupId(params,function(data){
        _this.WorkGroupHasWorks = data.data
      },function(){
        _this.WorkGroupHasWorks = []
      })
    },
    imgChange(){
      let _this=this
      _this.$set(_this.WorkGroupInfo,'cover_img',this.$refs.ImageUpload.imgSrc)
    }
  },
  components: {
    WorksChoose,
    Item01,
    RemoveBlock,
    EditBlock,
    PlusBlock,
    ImageUpload,
    BtnCommon,
    WorkGroupChoose
  },
  mounted(){
    let _this = this
    if (_this.$route.query.groupId){
      _this.WorkGroupId=_this.$route.query.groupId
    }
    this.dUserinfo = this.$store.getters.getUserinfo
    if (!this.dUserinfo.uid)this.$router.push({name:"PersonIndex"})
  }
}
</script>
<style scoped>
.WorkGroupEdit{padding: .3rem;padding-bottom: 4rem}
.ImageUpload{margin: 1rem auto;}
.workGroupName{border: 0;border-bottom: 1px solid #8C8B8B }
.BtnCommon{}
</style>

